<script setup>
import { onMounted, watch, ref } from 'vue';
import * as Cesium from 'cesium';

// 接收数据
const props = defineProps({
  dataList: Array
});

const cesiumContainer = ref(null);
let viewer = null;


Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTExODU4Yi1hNmJiLTQ5YTAtYjI5NC0zZDI0Njc1OGEwMjYiLCJpZCI6MjU4ODQ0LCJpYXQiOjE3NTEzNTYxMDR9.K2HIaFhp8ybf9gLtLhrjvUqFpSKh-TLqJ07lmJvs9K0'; // 

const updatePoints = (data) => {
  if (!viewer) return;
  // 先清除旧的点
  viewer.entities.removeAll();

  // 遍历新数据，添加新的点
  data.forEach(item => {
    if (item.gpsx && item.gpsy) {
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(item.gpsx, item.gpsy),
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED,
        },
        description: `
          <p>设备ID: ${item.did}</p>
          <p>液流通道一: ${item.j1}</p>
          <p>液流通道二: ${item.j2}</p>
        `
      });
    }
  });
};

onMounted(() => {
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: true, // 允许点击点位显示信息
    selectionIndicator: true,
    animation: false, // 关闭动画控件
    timeline: false, // 关闭时间线
    fullscreenButton: false, // 关闭全屏
    vrButton: false, // 关闭VR
    homeButton: false, // 关闭Home按钮
    navigationHelpButton: false, // 关闭帮助按钮
    geocoder: false, // 关闭地理编码搜索
    sceneModePicker: false, // 关闭2D/3D切换
    baseLayerPicker: false, // 关闭底图选择
  });
  // 移除Cesium LOGO
  viewer.cesiumWidget.creditContainer.style.display = 'none';
   // --- 【新增的样式注入代码】 ---
  // 获取信息框的 iframe 元素
  const infoBoxIframe = viewer.infoBox.frame;
  // 监听 iframe 是否加载完成
  infoBoxIframe.addEventListener('load', function () {
    // 获取 iframe 内部的 <head> 标签
    const head = infoBoxIframe.contentDocument.head;
    // 创建一个新的 <style> 标签
    const style = document.createElement('style');
    // 定义我们的深色模式样式
    style.textContent = `
        body {
            background-color: rgba(42, 42, 42, 0.95) !important;
            color: #ffffff !important;
        }
        .cesium-infoBox-title {
            color: #aefeff !important;
        }
    `;
    // 将这个 style 标签添加到 iframe 的 head 中
    head.appendChild(style);
  });
  // --- 【新增代码结束】 ---
  updatePoints(props.dataList);
});

watch(() => props.dataList, (newData) => {
  updatePoints(newData);
}, { deep: true });
</script>

<template>
  <div class="map-wrapper">
    <h2>GPS 点位可视化</h2>
    <div ref="cesiumContainer" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<style scoped>
.map-wrapper {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
}
</style>